<template>
	<view class="flex-col page">
		<MyHeader :title="title"></MyHeader>
		<view class="flex-col group_2">
			<view class="flex-row items-center section_4">
				<image class="image_7"
					src="https://ide.code.fun/api/image?token=6770cf3edefdb10011110c6d&name=f6d6fe6cd199109d70663b7db3131274.png" />
				<input class="input-keyword text ml-11" :placeholder="`请输入${title}`" v-model="keyword" />
			</view>
			<view v-if="searchList.length" class="flex-col mt-15">
				<view class="flex-col self-stretch mt-5">
					<view class="flex-row items-center list-item" v-for="(item, index) in searchList" :key="index"
						@click="chooseItem(item)">
						<image class="image_8"
							src="https://ide.code.fun/api/image?token=6770cf3edefdb10011110c6d&name=9aeca210385c8a02564fc5c10d663582.png" />
						<text class="font text_3 ml-5">{{item.address}}</text>
					</view>
				</view>
			</view>
			<view v-else class="flex-col mt-29">
				<text class="self-start font text_2">历史记录</text>
				<view class="flex-col self-stretch mt-5">
					<view v-if="items.length" class="flex-row items-center list-item" v-for="(item, index) in items"
						:key="index">
						<image class="image_8"
							src="https://ide.code.fun/api/image?token=6770cf3edefdb10011110c6d&name=9aeca210385c8a02564fc5c10d663582.png" />
						<text class="font text_3 ml-5">珠山区金鼎美食广场</text>
					</view>
					<ListisNull v-else></ListisNull>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		ref,
		watch,
		toRaw
	} from 'vue';
	import {
		getQueryAddress
	} from '@/apis/taxi';
	import {
		useUserStore
	} from '@/store/useUserStore';
	const props = defineProps({
		// 0 :始发地   1 :目的地
		type: {
			type: Number,
			default: 0
		}
	})
	const title = computed(() => {
		return props.type ? '目的地' : '始发地'
	})
	// 历史记录
	const items = ref([null, null])
	// 搜索到的数据
	const searchList = ref([])
	// console.log(searchList.value); // 打印 searchList 的值

	// 搜索关键字
	const keyword = ref('')

	watch(keyword, (newValue, oldValue) => {
		if (newValue !== oldValue) {
			sendSearchRequest(newValue);
		}
	})

	const sendSearchRequest = async () => {
		const res = await getQueryAddress()
		if (keyword.value) {
			searchList.value = res.data
		} else {
			searchList.value = []
		}

	}

	const userStore = useUserStore()
	// const res = ref(userStore.address)
	// console.log(11, userStore.address)
	const chooseItem = async (item) => {
		const rawItem = toRaw(item)
		if (props.type == 0) {
			userStore.storeStartingLocation(rawItem)

		} else {
			userStore.storeDestination(rawItem)
		}
		uni.reLaunch({
			url: "/subpkg/taxi/index/index"
		})
	}
</script>

<style scoped>
	.input-keyword {
		width: 85%;
	}

	.not-history-img {
		width: 116rpx;
		height: 104rpx;
	}

	.ml-11 {
		margin-left: 22rpx;
	}

	.mt-29 {
		margin-top: 58rpx;
	}

	.mt-5 {
		margin-top: 10rpx;
	}

	.ml-5 {
		margin-left: 10rpx;
	}

	.mt-179 {
		margin-top: 358rpx;
	}

	.mt-15 {
		margin-top: 30rpx;
	}

	.page {
		padding-bottom: 856rpx;
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.section {
		padding: 36rpx 12rpx 42rpx 32rpx;
		background-image: linear-gradient(180deg, #4c8eef 0%, #84bbd900 100%);
	}

	.group {
		padding: 0 16rpx;
	}

	.image {
		width: 34rpx;
		height: 22rpx;
	}

	.image_2 {
		width: 30rpx;
		height: 22rpx;
	}

	.image_3 {
		width: 48rpx;
		height: 22.66rpx;
	}

	.image_4 {
		width: 18rpx;
		height: 34rpx;
	}

	.section_2 {
		padding: 12rpx 24rpx;
		background-color: #ffffff99;
		border-radius: 50rpx;
		height: 64rpx;
		border-left: solid 1rpx #97979733;
		border-right: solid 1rpx #97979733;
		border-top: solid 1rpx #97979733;
		border-bottom: solid 1rpx #97979733;
	}

	.image-wrapper {
		width: 38rpx;
	}

	.image_6 {
		width: 38rpx;
		height: 14rpx;
	}

	.section_3 {
		background-color: #33333333;
		width: 1rpx;
		height: 37rpx;
	}

	.image_5 {
		width: 34rpx;
		height: 34rpx;
	}

	.group_2 {
		padding: 22rpx 32rpx 0;
	}

	.section_4 {
		padding: 12rpx 40rpx;
		background-color: #f7f8fa;
		border-radius: 36rpx;
	}

	.image_7 {
		width: 44rpx;
		height: 44rpx;
	}

	.text {
		color: #cccccc;
		font-size: 28rpx;
		font-family: SourceHanSansCN;
		line-height: 25.82rpx;
	}

	.list-item {
		padding: 28rpx 16rpx 16rpx;
		border-bottom: solid 1rpx #e5e5e5;
	}

	.image_8 {
		width: 46rpx;
		height: 46rpx;
	}

	.font {
		font-size: 32rpx;
		font-family: SourceHanSansCN;
		line-height: 30.02rpx;
		color: #333333;
	}

	.text_3 {
		line-height: 30.04rpx;
	}

	.text_2 {
		margin-left: 8rpx;
		line-height: 29.66rpx;
	}
</style>